<script lang="ts" setup>
//筛选
import { Operation } from "@element-plus/icons-vue";
import useGetData from "@/store/get";
import tool from "@/tool";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref, watch, watchEffect } from "vue";

//实例化路由
const route = useRoute();
const router = useRouter();
// 实例化 store
const store = useGetData();

//分类
//获取分类
const catData = ref("all");
const cat = ref();

//存储年份数据
const yearData = ref("all");
//年份列表
const year = ref();

//存储月份数据
const monthData = ref("all");
//月份
const month = tool.dateMonth;

onMounted(() => {
  //获取分类值存入数组
  store.getCatList();
  //获取年份值存入数组
  store.getPostFirstDate();
});

//监听
watch(
  () => store.archive.cat,
  (newVal) => {
    cat.value = newVal;
  }
);
watch(
  () => store.archive.year,
  (newVal) => {
    //将年份存入列表
    year.value = newVal;
  }
);

//监听
watchEffect(() => {
  //console.log(catData.value, yearData.value, monthData.value);
  //修改路由
  // 如果 category 参数为 "all"，则设置路由为空字符串
  if (catData.value === "all") {
    catData.value = "";
  }
  if (yearData.value === "all") {
    yearData.value = "";
  }
  if (monthData.value === "all") {
    monthData.value = "";
  }

  router.push({
    name: "Archive", // 路由的名称
    params: {
      category: catData.value, // category 参数为空字符串
      year: yearData.value, // year 参数为 2022
      month: monthData.value,
    },
  });
});

//重置按钮
const resetting = () => {
  catData.value = "all";
  yearData.value = "all";
  monthData.value = "all";
  console.log("我执行咯");
  console.log(catData.value);
};
//移动端筛选
const drawer = ref(false);
</script>
<template>
  <!--
    {{ catData }}{{ yearData }}{{ monthData }}
  -->
  <div class="filter-bar">
    <div class="filter-bar__content">
      <div class="filter-bar__content-item">
        <el-button text size="default" class="screen" @click="drawer = true">
          <el-icon><Operation /></el-icon>
          筛选
        </el-button>
      </div>
      <div class="filter-bar__content-item filter-bar__content-control">
        <ul class="filter-bar__content-control-placeholder-list">
          <li class="filter-bar__content-control-placeholder">
            <el-select
              v-model="catData"
              class="m-2"
              placeholder="所有话题"
              size="large"
              filterable
            >
              <el-option
                class="option"
                v-for="item in cat"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </li>
          <li class="filter-bar__content-control-placeholder">
            <el-select
              v-model="yearData"
              class="m-2"
              placeholder="全部年份"
              size="large"
              filterable
            >
              <el-option
                class="option"
                v-for="item in year"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </li>
          <li class="filter-bar__content-control-placeholder">
            <el-select
              v-model="monthData"
              class="m-2"
              placeholder="全部月份"
              size="large"
            >
              <el-option
                class="option"
                v-for="item in month"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </li>
        </ul>
      </div>
      <div class="filter-bar__content-item filter-bar__content-reset">
        <el-button text type="primary" size="default" @click="resetting">
          重置
        </el-button>
      </div>
    </div>
  </div>

  <!--移动端筛选-->

  <el-drawer
    v-model="drawer"
    :show-close="false"
    direction="ttb"
    size="100%"
    :z-index="200"
    :append-to-body="true"
    class="archive-model"
  >
    <template #header="{ close, titleId, titleClass }">
      <el-button text @click="close">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
      </el-button>

      <el-button
        text
        type="primary"
        size="default"
        @click="resetting"
        class="filter-bar__content-item-reset-button"
      >
        重置
      </el-button>
    </template>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-select
          v-model="catData"
          class="m-2"
          placeholder="所有话题"
          size="large"
          filterable
        >
          <el-option
            class="option"
            v-for="item in cat"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-col>
      <el-col :span="24">
        <el-select
          v-model="yearData"
          class="m-2"
          placeholder="全部年份"
          size="large"
          filterable
        >
          <el-option
            class="option"
            v-for="item in year"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-col>
      <el-col :span="24">
        <el-select
          v-model="monthData"
          class="m-2"
          placeholder="全部月份"
          size="large"
        >
          <el-option
            class="option"
            v-for="item in month"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-col>
    </el-row>

    <el-button
      type="primary"
      size="default"
      class="filter-bar__content-control-done"
      @click="drawer = false"
    >
      完成
    </el-button>
  </el-drawer>
</template>
<style lang="less" scoped>
:global(.archive-model .el-drawer__header) {
  justify-content: space-between;
}
:global(.archive-model .el-drawer__header .el-icon) {
  font-size: 24px;
}
:global(.archive-model .el-drawer__header .el-button) {
  flex: none;
}

:global(.archive-model .el-drawer__body) {
  padding: 0;
}
:global(.archive-model .el-select) {
  display: block;
  padding: 10px 0;
  width: 82.5%;
  margin: 0 auto;
}

.screen {
  color: #606266;
}

.filter-bar {
  box-sizing: border-box;
  background-color: #f5f5f7;
  position: sticky;
  top: 0;
  z-index: 2;
  margin-top: 0;
}
.filter-bar__content {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  padding: 32px 0 16px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 980px;
  font-size: 14px;
  line-height: 1.42859;
  font-weight: 600;
  letter-spacing: -0.016em;
}
.filter-bar__content-item {
  margin-bottom: 16px;
  i {
    display: none;
  }
}
.filter-bar__content-control {
  display: flex;
  flex: 0 1 auto;
  justify-content: space-between;
}
.filter-bar__content-control-placeholder-list {
  list-style: none;
  display: flex;
  margin-left: 12px;
  margin-right: 16px;
}
.filter-bar__content-control-placeholder {
  position: relative;
  background-color: #fff;
  border-radius: 7px;
  box-sizing: border-box;
  width: 255px;
  margin-left: 12px;
  :deep(.el-select) {
    display: block;
  }
}
.option {
  margin: 8px;

  :deep(span) {
    padding: 8px;
  }
}

.filter-bar__content-reset {
  color: #06c;
}
@media only screen and (max-width: 1068px) {
  .filter-bar__content {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
  .filter-bar__content-control-placeholder {
    width: 183px;
  }
}
@media only screen and (max-width: 734px) {
  .filter-bar__content {
    margin-left: auto;
    margin-right: auto;
    width: 87.5%;

    justify-content: space-between;
    padding: 24px 0;
  }
  .filter-bar__content-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    i {
      margin-right: 10px;
      display: block;
    }
  }
  .filter-bar__content-control {
    display: none;
  }
  .filter-bar__content-control-done {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    bottom: 0;
    z-index: 1;
    height: 52px;
    width: 100%;
    background-color: #0071e3;
    color: #fff;

    margin: 0px;
  }
  .filter-bar__content-item-reset-button {
    margin-right: 24px;
    color: #06c;
  }
  .screen {
    color: #06c;
  }
}
</style>
